<template>
  <div>
    <div class="graph">
      <el-card>
        <div ref="echarts1" style="height: 380px"></div>
      </el-card>
      <el-card>
        <div ref="echarts2" style="height: 380px"></div>
      </el-card>
    </div>
    <div class="graph" style="margin-top: 20px">
      <el-card>
        <div ref="echarts3" style="height: 380px"></div>
      </el-card>
      <el-card>
        <div ref="echarts4" style="height: 380px"></div>
      </el-card>
    </div>
    <el-card>
      <div ref="echarts5" style="height: 380px"></div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      seven_organic_data: {},
    };
  },
  created() {
    this.getSevenOrganicData("organic");
  },
  mounted() {},
  watch: {
    seven_organic_data() {
      this.$nextTick(() => {
        this.drawLineChart1();
        this.drawLineChart2();
        this.drawLineChart3();
        this.drawLineChart4();
        this.drawLineChart5();
      });
    },
  },
  computed: {},
  methods: {
    getSevenOrganicData(category) {
      this.$axios({
        url: "getSevenData",
        params: {
          monitor_point_code: this.$store.state.userInfo.monitor_point_code,
          category,
        },
      })
        .then((res) => {
          this.seven_organic_data = res.data;
        })
        .catch((err) => err);
    },
    // echarts 配置对象
    getOrganicConfigObj(showX, line_title) {
      let series = [];
      for (let i in showX) {
        let dData = [];
        let x_key = this.common.getObjectKey(this.constant.organic, showX[i]);
        for (let j in this.seven_organic_data) {
          dData.push(this.seven_organic_data[j][x_key]);
        }
        series.push({
          name: showX[i],
          type: "line",
          data: dData,
        });
      }
      const option = {
        title: {
          text: line_title,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: showX,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.common.getSevenDays(),
        },
        yAxis: {
          type: "value",
        },
        series,
      };
      return option;
    },
    drawLineChart1() {
      const echarts1 = this.$echarts.init(this.$refs.echarts1);
      var echarts1Option = {};
      const showX = ["阴离子表面活性剂"];
      const title = "有机指标 0.01-0.1";
      echarts1Option = this.getOrganicConfigObj(showX, title);
      echarts1.setOption(echarts1Option);
    },
    drawLineChart2() {
      const echarts2 = this.$echarts.init(this.$refs.echarts2);
      var echarts2Option = {};
      const showX = ["六六六", "苯并芘"];
      const title = "有机指标 0.001-0.005";
      echarts2Option = this.getOrganicConfigObj(showX, title);
      echarts2.setOption(echarts2Option);
    },
    drawLineChart3() {
      const echarts3 = this.$echarts.init(this.$refs.echarts3);
      var echarts3Option = {};
      const showX = ["马拉硫磷", "甲基对硫磷"];
      const title = "有机指标 0.0001-0.001";
      echarts3Option = this.getOrganicConfigObj(showX, title);
      echarts3.setOption(echarts3Option);
    },
    drawLineChart4() {
      const echarts4 = this.$echarts.init(this.$refs.echarts4);
      var echarts4Option = {};
      const showX = ["活性磷酸盐"];
      const title = "有机指标 0.001-0.05";
      echarts4Option = this.getOrganicConfigObj(showX, title);
      echarts4.setOption(echarts4Option);
    },
    drawLineChart5() {
      const echarts5 = this.$echarts.init(this.$refs.echarts5);
      var echarts5Option = {};
      const showX = ["滴滴涕"];
      const title = "有机指标 0.00005-0.0001";
      echarts5Option = this.getOrganicConfigObj(showX, title);
      echarts5.setOption(echarts5Option);
    },
  },
};
</script>
<style lang='less' scoped>
.graph {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .el-card {
    width: 49%;
  }
}
</style>
